<template>
  <div class="home">
    <div class="hrader">
      <img src="/img/1.png" alt />
    </div>
    <div class="tarva">
      <img src="/img/1.jpg" alt />
      <h4>{{title}}</h4>
      <p>{{content}}</p>
    </div>
    <div class="sort">
        <ul>
          <li @click="shen">价格升序<span>↑</span></li>
          <li @click="jiang">价格降序<span>↓</span></li>
          <li @click="shen1">销量升序<span>↑</span></li>
          <li @click="jiang1">销量降序<span>↓</span></li>
        </ul>
      </div>
    <div class="shop">
      
      <div class="cat" v-for="item in list" :key="item.id">
        <div class="img">
          <img :src="item.pic" alt />
        </div>
        <div class="txt">
          <h4>{{item.name}}</h4>
          <p>已售：{{item.num}}件</p>
          <p>单价：<span>￥{{item.money}}</span></p>
          <div class="btn">
            <button @click="btn(item.id)">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
    <router-view />
    <div class="cart" @click="fei">
      <span>{{lis.length}}</span>
      <img src="/img/cart.png" alt="">
    </div>
    
  </div>
</template>

<script>
import TabBar from '../components/TabBar';
import { mapState } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      title: "爱时尚精品屋",
      content: "公告：欢迎光临，流行爆款库存有限请尽快下单！"
    };
  },
  mounted() {
    let shuju = JSON.parse(localStorage.getItem("shuju"));
    if (!shuju) {
      axios.get("/list").then(res => {
        localStorage.setItem("shuju",JSON.stringify(res.data.list))
      });
    }
  },
  methods:{
      shen(){
        this.$store.commit('add');
      },
      shen1(){
        this.$store.commit('add1');
      },
      jiang(){
        this.$store.commit('add2');
      },
      jiang1(){
        this.$store.commit('add3');
      },
      btn(id){
        this.$store.commit('addlis',id);
      },
      fei(){
        this.$router.push('/shop');
      }
  },
  computed: {
    ...mapState(["list","lis"])
  },
  components:{
    "TabBar":TabBar
  }
};
</script>

<style lang='scss' scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  .hrader {
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tarva {
    height: 150px;
    margin-top: -20px;
    text-align: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .sort{
    height: 40px;
    margin-top: 20px;
    ul{
      width: 100%;
      height: 100%;
      display: flex;
      line-height: 40px;
      justify-content: space-around;
      border-bottom: 1px solid #f5f5f5;
    }
  }
  .shop{
    flex:1;
    overflow-y: auto;
    .cat{
      height: 100px;
      display: flex;
      margin-top: 10px;
      .img{
        width: 100px;
        margin-right: 20px;
      }
      .txt{
        span{
          color: red
        }
      }
      .btn{
        position: relative;;
        right: -150px;
        bottom: 0;
        button{
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border: none;
          background: red
        }
      }
    }
  }
  .cart{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: skyblue;
    text-align: center;
    span{
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: red;
      position: absolute;
      right: 0;
      top: -10px;
    }
    img{
      width: 80%;
      height: 80%;
      margin-top: 5px;
    }
  }
}
</style>
